<template>
	<cxView>
		<u-form :model="model" ref="form">

			<slot />

			<slot name="confirm">
				<cxView position="fixed" :height="height" bottom="0" left="0" width="100%" background="yellow">
					<cxButton background="red" height="70" @confirm="submit">提交</cxButton>
				</cxView>

			</slot>
		</u-form>
	</cxView>
</template>

<script>
	export default {
		data() {
			return {
				height: this.$cx.cxBottomSafeHeight() + 70,
			};
		},

		mounted() {
			console.log(this.model)
			this.$refs.form.setRules(this.rules);
		},


		methods: {

			async submit() {
				console.log("验证")
				console.log(this.model)
				console.log(this.$refs.form)
				// console.log(this.$refs.form.validate())
				// let valid = await this.$refs.form.validate();
				// console.log("valid---" + valid)
				// if (valid) {
				// 	console.log("验证成功")
				// 	this.$emit("confirm")

				// } else {
				// 	console.log("验证失败")
				// }

				// this.$refs.form.validate(valid => {
				// 	if (valid) {
				// 		console.log('验证通过');
				// 	} else {
				// 		console.log('验证失败');
				// 	}
				// });
				// this.$refs.form.setRules(this.rules)
				// console.log(this.$refs.form.validate());
				this.$refs.form.validate(valid => {
					if (valid) {

						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});

			}


		},
		props: {
			model: {
				type: Object,
				default () {
					return {}
				}
			},
			rules: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		watch: {
			rules: {
				immediate: true,
				deep: true,
				handler(val) {

					this.$nextTick(() => {
						console.log(val)
						console.log("val---------")
						this.$refs.form.setRules(val)
					})

				}
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>